<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>n的值是：{{n}}</h1>
        <button @click="n++">点我n+1</button>
        <hr>
        <!-- 功能实现：输入框里有n,且光标的焦点在输入框中 -->
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        Vue.config.productionTip = false;
        let vm = new Vue({
            el: '#root',
            data: {
                name:'尚硅谷123',
                n:1,
            },
            directives:{
                // fbind(element, binding){
                //     element.value = binding.value;
                //     // 第一次的光标焦点不会在输入框中
                //     // 因为此时指令所在的元素还没有插入到页面中
                //     element.focus();
                // }

                // 函数式的自定义指令实际上是特殊的对象式的自定义指令
                // 它只包含bind和update两个部分
                fbind:{
                    // 指令与元素成功绑定时，下面函数执行
                    bind(element, binding){
                        console.log(this);
                        element.value = binding.value;
                    },
                    // 指令所在元素被插入到页面时
                    inserted(element, binding){
                        element.focus();
                    },
                    // 指令所在模板被重新解析时
                    update(element, binding){
                        element.value = binding.value;
                    },
                }
            }
        });
    </script>
</body>
</html>